<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" @click="queryType('1')">租房分期</el-menu-item>
      <el-menu-item index="2" @click="queryType('2')">收房贷</el-menu-item>
      <el-menu-item index="3" @click="queryType('3')">应收租约保理</el-menu-item>
    </el-menu>
    <br>
    <el-card shadow="hover" v-if="this.ruleForm.jrProductType=='1'">
      <el-button type="warning" plain @click="toAdd('1')">添加租房分期通道</el-button>
    </el-card>
    <el-card shadow="hover" v-if="this.ruleForm.jrProductType=='2'">
      <el-button type="warning" plain @click="toAdd('2')">添加收房贷通道</el-button>
    </el-card>
    <el-card shadow="hover" v-if="this.ruleForm.jrProductType=='3'">
      <el-button type="warning" plain @click="toAdd('3')">添加租约保理通道</el-button>
    </el-card>
    <br>
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" inline>
      <el-form-item label="卡号" prop="bankCardNumber">
        <el-input v-model="ruleForm.bankCardNumber" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="jrProductName"
        label="产品名称">
      </el-table-column>
      <el-table-column
        prop="companyName"
        label="资方">
      </el-table-column>
      <el-table-column
        label="账户信息">
        <template slot-scope="scope">
          {{ scope.row.openingBank }}{{ scope.row.bankCardNumber }}
        </template>
      </el-table-column>
      <el-table-column
        prop="instalmentPeriod"
        label="分期期限">
        <template slot-scope="scope">
          {{ scope.row.instalmentPeriod }}个月
        </template>
      </el-table-column>
      <el-table-column
        prop="repaymentType"
        label="还款方式">
        <template slot-scope="scope">
          <span v-if="scope.row.repaymentType=='1'">按月还款</span>
          <span v-if="scope.row.repaymentType=='2'">按季还款</span>
          <span v-if="scope.row.repaymentType=='3'">按租约周期支付</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="creditLine"
        label="授信额度(%)">
      </el-table-column>
      <el-table-column
        prop="delFlg"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.delFlg==0">
            正常
          </span>
          <span v-if="scope.row.delFlg==1">
            <font color="red">已作废</font>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row,'1')" type="text" size="small">查看</el-button>
          |
          <span v-if="scope.row.delFlg==1">
             <el-button type="text" size="small" disabled>编辑</el-button>
             <el-button type="text" size="small" disabled>作废</el-button>
          </span>
          <span v-if="scope.row.delFlg==0">
            <el-button type="text" size="small" @click="toUpdate(scope.row,'2')"><font
              color="#ffd700">编辑</font></el-button>
            <el-button type="text" size="small" @click="uout(scope.row.id)"><font color="red">作废</font></el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="ruleForm.pageNum"
        :page-sizes="[1, 3, 10, 20]"
        :page-size="ruleForm.pageSize"
        :page-count="pages"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!--修改查看-->
    <el-dialog title="查看详情" :visible.sync="open" width="600px" append-to-body>
      <el-row :gutter="15">
        <el-form ref="formData" :model="formData" size="mini" :disabled="this.aa" label-width="100px"
                 label-position="left">
          <el-col :span="11">
            <el-form-item label="产品名称" prop="jrProductName">
              <el-input v-model="formData.jrProductName" placeholder="请输入产品名称" :maxlength="30" show-word-limit
                        clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="资金提供方" prop="companyName">
              <el-select v-model="formData.companyName" placeholder="请选择资金提供方" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in clist" :key="index" :label="item.companyName"
                           :value="item.companyName" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="分期期限" prop="instalmentPeriod">
              <el-radio-group v-model="formData.instalmentPeriod" size="medium">
                <el-radio v-for="(item, index) in instalmentPeriodOptions" :key="index" :label="item.value">
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="还款方式" prop="repaymentType">
              <el-radio-group v-model="formData.repaymentType" size="medium">
                <el-radio v-for="(item, index) in repaymentTypeOptions" :key="index" :label="item.value">{{
                    item.label
                  }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="授信额度" prop="creditLine">
              <el-input v-model="formData.creditLine" placeholder="请输入授信额度" :maxlength="20" show-word-limit
                        clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <div v-if="this.ruleForm.jrProductType=='1'">
            <el-col :span="23">
              <el-form-item label="支付PC链接（URL）" prop="urlPayPc">
                <el-input v-model="formData.urlPayPc" placeholder="请输入支付PC链接（URL）" :maxlength="30"
                          show-word-limit clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="支付移动链接（URL）" prop="urlPayMoble">
                <el-input v-model="formData.urlPayMoble" placeholder="请输入支付移动链接（URL）" :maxlength="30"
                          show-word-limit clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="补全信息PC（URL）" prop="urlAddDetailInfoPc">
                <el-input v-model="formData.urlAddDetailInfoPc" placeholder="请输入补全信息PC（URL）" :maxlength="30"
                          show-word-limit clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="补全信息移动（URL）" prop="urlAddDetailInfoMobile">
                <el-input v-model="formData.urlAddDetailInfoMobile" placeholder="请输入补全信息移动（URL）" :maxlength="30"
                          show-word-limit clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="App下载（URL）" prop="urlAppDownload">
                <el-input v-model="formData.urlAppDownload" placeholder="请输入App下载（URL）" :maxlength="30"
                          show-word-limit clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <el-col :span="23">
            <el-form-item label="账户类型" prop="accountType">
              <el-select v-model="formData.accountType" placeholder="请选择账户类型" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in accountTypeOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--          <div v-if="this.ruleForm.jrProductType=='2'">-->
          <el-col :span="23">
            <el-form-item label="开户省份" prop="bankAccountProvince">
              <el-select v-model="formData.bankAccountProvince" placeholder="请选择" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in plist" :key="index" :label="item.regionName"
                           :value="item.regionId" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="银行名称" prop="bankName">
              <el-input v-model="formData.bankName" placeholder="请输入" :maxlength="30" show-word-limit
                        clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <div v-if="formData.accountType=='1'">
            <el-col :span="23">
              <el-form-item label="开户支行" prop="openingBank">
                <el-input v-model="formData.openingBank" placeholder="请输入" :maxlength="30" show-word-limit
                          clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="联行行号" prop="bankBranchCodeLh">
                <el-input v-model="formData.bankBranchCodeLh" placeholder="" :maxlength="30" show-word-limit
                          clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </div>

          <el-col :span="23">
            <el-form-item label="账户姓名" prop="accountName">
              <el-input v-model="formData.accountName" placeholder="" :maxlength="30" show-word-limit
                        clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="银行卡号" prop="bankCardNumber">
              <el-input v-model="formData.bankCardNumber" placeholder="" :maxlength="30" show-word-limit
                        clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <!--          </div>-->
          <el-col :span="23">
            <el-form-item label="申请条件" prop="applicationConditions">
              <el-input v-model="formData.applicationConditions" type="textarea" placeholder="请选择申请条件"
                        :maxlength="100" show-word-limit :autosize="{minRows: 2, maxRows: 5}"
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="风控要求" prop="riskRequirement">
              <el-input v-model="formData.riskRequirement" type="textarea" placeholder="请选择风控要求"
                        :maxlength="100" show-word-limit :autosize="{minRows: 2, maxRows: 5}"
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <span v-if="this.xg=='2'">
          <el-button @click="updateProduct()" type="warning">修改</el-button>
        </span>
        <el-button @click="close">取消</el-button>
      </div>
    </el-dialog>

    <!--添加-->
    <el-dialog title="查看详情" :visible.sync="open2" width="600px" append-to-body>
      <el-row :gutter="15">
        <el-form ref="formData" :model="formData" size="mini" :disabled="this.aa" label-width="100px"
                 label-position="left">
          <el-col :span="11">
            <el-form-item label="产品名称" prop="jrProductName">
              <el-input v-model="formData.jrProductName" placeholder="请输入产品名称" :maxlength="30" show-word-limit
                        clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="资金提供方" prop="companyName">
              <el-select v-model="formData.companyName" placeholder="请选择资金提供方" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in clist" :key="index" :label="item.companyName"
                           :value="item.companyName" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="分期期限" prop="instalmentPeriod">
              <el-radio-group v-model="formData.instalmentPeriod" size="medium">
                <el-radio v-for="(item, index) in instalmentPeriodOptions" :key="index" :label="item.value">
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="还款方式" prop="repaymentType">
              <el-radio-group v-model="formData.repaymentType" size="medium">
                <el-radio v-for="(item, index) in repaymentTypeOptions" :key="index" :label="item.value">{{
                    item.label
                  }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="授信额度" prop="creditLine">
              <el-input v-model="formData.creditLine" placeholder="请输入授信额度" :maxlength="20" show-word-limit
                        clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <div v-if="this.ruleForm.jrProductType=='1'">
            <el-col :span="23">
              <el-form-item label="支付PC链接（URL）" prop="urlPayPc">
                <el-input v-model="formData.urlPayPc" placeholder="请输入支付PC链接（URL）" :maxlength="30"
                          show-word-limit clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="支付移动链接（URL）" prop="urlPayMoble">
                <el-input v-model="formData.urlPayMoble" placeholder="请输入支付移动链接（URL）" :maxlength="30"
                          show-word-limit clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="补全信息PC（URL）" prop="urlAddDetailInfoPc">
                <el-input v-model="formData.urlAddDetailInfoPc" placeholder="请输入补全信息PC（URL）" :maxlength="30"
                          show-word-limit clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="补全信息移动（URL）" prop="urlAddDetailInfoMobile">
                <el-input v-model="formData.urlAddDetailInfoMobile" placeholder="请输入补全信息移动（URL）" :maxlength="30"
                          show-word-limit clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="App下载（URL）" prop="urlAppDownload">
                <el-input v-model="formData.urlAppDownload" placeholder="请输入App下载（URL）" :maxlength="30"
                          show-word-limit clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <el-col :span="23">
            <el-form-item label="账户类型" prop="accountType">
              <el-select v-model="formData.accountType" placeholder="请选择账户类型" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in accountTypeOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="开户省份" prop="bankAccountProvince">
              <el-select v-model="formData.bankAccountProvince" placeholder="请选择" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in plist" :key="index" :label="item.regionName"
                           :value="item.regionId" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="银行名称" prop="bankName">
              <el-input v-model="formData.bankName" placeholder="请输入" :maxlength="30" show-word-limit
                        clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <div v-if="formData.accountType=='1'">
            <el-col :span="23">
              <el-form-item label="开户支行" prop="openingBank">
                <el-input v-model="formData.openingBank" placeholder="请输入" :maxlength="30" show-word-limit
                          clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="联行行号" prop="bankBranchCodeLh">
                <el-input v-model="formData.bankBranchCodeLh" placeholder="" :maxlength="30" show-word-limit
                          clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </div>

          <el-col :span="23">
            <el-form-item label="账户姓名" prop="accountName">
              <el-input v-model="formData.accountName" placeholder="" :maxlength="30" show-word-limit
                        clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="银行卡号" prop="bankCardNumber">
              <el-input v-model="formData.bankCardNumber" placeholder="" :maxlength="30" show-word-limit
                        clearable prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="申请条件" prop="applicationConditions">
              <el-input v-model="formData.applicationConditions" type="textarea" placeholder="请选择申请条件"
                        :maxlength="100" show-word-limit :autosize="{minRows: 2, maxRows: 5}"
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="风控要求" prop="riskRequirement">
              <el-input v-model="formData.riskRequirement" type="textarea" placeholder="请选择风控要求"
                        :maxlength="100" show-word-limit :autosize="{minRows: 2, maxRows: 5}"
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="saveProduct()" type="warning">保存</el-button>
        <el-button @click="close2">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {
  apiUpdateProduct,
  getProductList,
  getProductMsg,
  letuout,
  apiGetCapName,
  apiSaveProduct
} from "@/api/banking/financialproducts";
import {getProvince} from "@/api/banking/financialproducts";

export default {
  name: "index",
  data() {
    return {
      open2: false,
      open: false,
      aa: true,
      tj: '1',
      formData: {
        id: undefined,
        jrProductName: '',
        companyName: '',
        instalmentPeriod: undefined,
        repaymentType: undefined,
        creditLine: '',
        urlPayPc: '',
        urlPayMoble: '',
        urlAddDetailInfoPc: '',
        jrProductType: undefined,
        urlAddDetailInfoMobile: '',
        urlAppDownload: '',
        accountType: undefined,
        applicationConditions: undefined,
        bankAccountProvince: undefined,
        riskRequirement: undefined,
        openingBank: undefined,
        bankBranchCodeLh: undefined,
        updateTime: undefined,
        accountName: undefined,
        bankName: undefined,
        bankId: undefined,
        bankCardNumber: undefined,
      },
      instalmentPeriodOptions: [{
        "label": "12个月",
        "value": 12
      }, {
        "label": "24个月",
        "value": 24
      }],
      repaymentTypeOptions: [{
        "label": "按月还款",
        "value": 1
      }, {
        "label": "按季还款",
        "value": 2
      }, {
        "label": "按租约周期支付",
        "value": 3
      }],
      accountTypeOptions: [{
        "label": "对公账户",
        "value": 1
      }, {
        "label": "对私账户",
        "value": 2
      }],
      activeIndex: '1',
      plist: [],
      tableData: [{}],
      ruleForm: {
        pageNum: 1,
        pageSize: 10,
        jrProductType: '1',
      },
      total: 0,
      pages: 0,
      xg: '1',
      clist: [],
    }
  }, methods: {
    saveProduct() {
      apiSaveProduct(this.formData).then(res => {
        this.$message.success("保存成功！");
        this.open2 = false;
        this.formData = {};
        this.ruleForm.pageNum = 1;
        this.list();
      }).catch(res => {
        this.$message.error("保存失败！请联系管理员！！")
      })
    },
    toAdd(val) {
      this.formData = {};
      this.formData.jrProductType = val;
      this.aa = false;
      this.open2 = true;
    },
    updateProduct() {
      apiUpdateProduct(this.formData).then(res => {
        this.$message.success("修改成功！");
        this.open = false;
        this.formData = {};
        this.ruleForm.pageNum = 1;
        this.list();
      }).catch(res => {
        this.$message.error("修改失败！请联系管理员！！")
      })
    },
    getProList() {
      getProvince({pid: 1}).then(res => {
        console.log('城市列表', res);
        this.plist = res.msgData;
      })
    },
    uout(id) {
      this.$confirm('此操作将永久作废该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        letuout({id: id}).then(res => {
          if (res.flag) {
            this.$message.success("作废成功！");
            this.ruleForm.pageNum = 1;
            this.list();
          }
        }).catch(res => {
          this.$message.error("作废失败！")
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消作废'
        });
      });

    },
    onOpen() {
    },
    onClose() {
      this.$refs['formData'].resetFields()
    },
    close() {
      this.open = false;
      this.formData = {};
    },
    close2() {
      this.open2 = false;
      this.formData = {};
    },
    handleConfirm() {
      this.$refs['formData'].validate(valid => {
        if (!valid) return
        this.close()
      })
    },
    queryType(val) {
      this.ruleForm.jrProductType = val;
      this.ruleForm.pageNum = 1;
      this.list();
    },
    submitForm(formName) {
      this.ruleForm.pageNum = 1;
      this.list();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    list() {
      getProductList(this.ruleForm).then(res => {
        console.log('列表', res);
        let msgData = res.msgData;
        this.tableData = msgData.list;
        this.total = msgData.total;
        this.pages = msgData.pages;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.ruleForm.pageNum = 1;
      this.ruleForm.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.ruleForm.pageNum = val;
      this.list();
    },
    handleClick(row, xg) {
      this.xg = xg;
      this.formData = {};
      this.aa = true;
      console.log(row);
      this.open = true;
      getProductMsg({id: row.id}).then(res => {
        console.log('详情回显', res);
        this.formData = res.msgData;
      })
    },
    toUpdate(row, xg) {
      this.xg = xg;
      this.formData = {};
      console.log(row);
      // this.$refs.formData.disabled = false;
      this.aa = false;

      this.open = true;
      getProductMsg({id: row.id}).then(res => {
        console.log('修改回显', res);
        this.formData = res.msgData;
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    capList() {
      apiGetCapName().then(res => {
        this.clist = res.msgData;
      })
    }

  }, created() {
    this.list();
    this.getProList();
    this.capList();
  }

}
</script>

<style scoped>

</style>
